<template>
    <div class="tab-pane-wrapper">
        <el-form class="form-search" :model="form" inline>
            <el-form-item label="测点名称">
                <el-input v-model="form.paramName" placeholder="请输入测点名称"></el-input>
            </el-form-item>
            <el-form-item label="时间">
                <el-date-picker style="width: 400px" v-model="form.dateRange" start-placeholder="开始日期"
                    end-placeholder="结束日期" type="daterange" value-format="yyyy-MM-dd" :unlink-panels="true" clearable>
                </el-date-picker>
            </el-form-item>
            <el-form-item label="">
                <span class="fastTimeBtn" @click="fastTimeBtn(7)">近7天</span>
                <span class="fastTimeBtn" @click="fastTimeBtn(30)">近30天</span>
            </el-form-item>
            <el-form-item label="">
                <label class="btn-nav-bg stripe-btn" @click="getList">查 询</label>
                <!-- <label class="btn-nav-bg stripe-btn" @click="exportExcel">导 出</label> -->
            </el-form-item>
        </el-form>
        <page-table :tableData="tableData" :tableLabel="colSData" :showSelection="false" :pager="pager"
            :table-height="tableHeight" @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"></page-table>
    </div>
</template>
<script>
import PageTable from "@/components/PageTable";
import {
    postZdyjHistoryZdHsyPage
} from '../api'
export default {
    name: "history",
    props: {
        type: {
            type: String,
            default: "",
        },
    },
    components: {
        PageTable,
    },
    data() {
        return {
            form: {
                paramName: "",
                dateRange: [],
            },
            tableData: [],
            colSData: [
                { label: "子模块名称", param: "moduleName" },
                { label: "监测点名称", param: "pointName" },
                { label: "监测值", param: "value" },
                { label: "监测时间", param: "time" },
            ],
            pager: {
                pageSize: 10, // 每页数据量
                currentPage: 1, // 分页  当前页
                total: 0, //列表总数
            },
            tableHeight: 400,
            moduleIdList: [],
        };
    },
    watch: {
        '$store.state.moduleNo'(newVal, oldVal) {
            this.getList();
        },
        '$store.state.electrodeName'(newVal, oldVal) {
            this.getList();
        },
        '$store.state.bridgeName'(newVal, oldVal) {
            this.getList();
        },
    },
    created() {
        this.form.dateRange = [
            this.$moment().add(-1, "month").format("YYYY-MM-DD"),
            this.$moment().format("YYYY-MM-DD"),
        ];
        this.calcHeight();
        this.getList();
    },
    mounted() {

    },
    methods: {
        async getList() {
            let params = {
                bridgeName: this.$store.state.bridgeName,
                electrodeName: this.$store.state.electrodeName,
                endTime: this.form.dateRange[1] + ' 23:59:59',
                locationName: this.$route.query.site,
                moduleNo: this.$store.state.moduleNo,
                startTime: this.form.dateRange[0] + ' 00:00:00',
                currentPage: this.pager.currentPage,
                size: this.pager.pageSize,
                pointName: this.form.paramName
            };
            let result = await postZdyjHistoryZdHsyPage(params);
            if (result.code == 200) {
                this.tableData = result.data.records;
                this.pager.total = Number(result.data.total);
            }
        },
        fastTimeBtn(dayNum) {
            this.form.dateRange = [
                this.$moment().add(-dayNum, "day").format("YYYY-MM-DD"),
                this.$moment().format("YYYY-MM-DD"),
            ];
        },
        // exportExcel() { },
        calcHeight() {
            this.tableHeight = window.innerHeight - 230;
        },
        handleSizeChange(val) {
            this.pager.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.pager.currentPage = val;
            this.getList();
        },

    },
};
</script>
<style scoped lang="less">
.tab-pane-wrapper {
    height: 100%;
    width: calc(100% - 380px);
    margin-left: 380px;
    padding: 20px;
    background-color: #202f3e;

    //display: flex;
    //.content-right {
    //  flex: 1;
    //  height: 100%;
    //  margin-left: 20px;
    //  padding: 20px;
    //  // border: 1px solid #006686;
    //  background-color: #202f3e;
    .form-search {
        margin-bottom: 16px;

        .fastTimeBtn {
            color: #c6d3ec;
            font-size: 16px;
            font-weight: 500;
            margin-right: 16px;
            cursor: pointer;
        }
    }

    //}
}
</style>
